<template>
	<div class="mt-30px mb-30px relative">
		<div class="flex items-center justify-between min-h-500px">
			<!-- 左侧 -->
			<div>
				<p class="text-#000000 text-48px font-bold">欧神闪兑</p>
				<p class="text-#000000 text-48px font-bold">主流币无滑点兑换</p>
				<p class="text-#000000 text-18px mt-30px">
					<span>0手续费</span>
					<span class="ml-10px mr-10px">|</span>
					<span>简单快捷</span>
					<span class="ml-10px mr-10px">|</span>
					<span>即时报价</span>
				</p>
			</div>
			<!-- 右侧 -->
			<div class="w-36%">
				<!-- 操作卡片 -->
				<div class="shadow-[1px_2px_25px_#E5E6EB]
				  border-1px border-solid border-#E5E6EB rounded-10px w-100% h-700px box-border pl-30px relative
				  pr-30px pt-40px pb-40px">
					<div class="border-1px border-solid border-#E5E6EB p-16px rounded-10px">
						<div class="flex items-center justify-between w-100%
						text-14px text-#000000">
							<p>从</p>
							<div class="flex items-center justify-between">
								<p class="mr-10px">可用余额 0 CNY</p>
								<img src="/transaction/exchange/add-blue.svg" alt="" class="w-16px h-16px cursor-pointer"
								@click="showAddDialog = true">
							</div>
						</div>

						<div class="flex items-center justify-between mb-10px mt-10px">
							<!-- 支付币种选中 -->
							<img :src="selectedCoin.form.icon" style="width: 20px;height:20px;">
							<el-select v-model="selectedCoin.form.coin" suffix-icon="CaretBottom"
								class="m-2 exchange-top-box-right-select" size="large" @change="changeFormCoin"
								style="width: 100px;height: 40px;" popper-class="c2c-select-popper" placement="bottom-end">
								<el-option v-for="(item, index) in coinList" :label="item.coin" :value="item.coin"
									:key="index">
									<div>
										<div>
											<img :src="item.icon" alt="">
											<span class="text-dark-700">
												{{ item.coin }}
											</span>
										</div>

										<el-icon color="rgb(17,76,238)"
											v-if="item.coin === selectedCoin.form.coin"><Select /></el-icon>
									</div>
								</el-option>
							</el-select>
							<el-input placeholder="100-200000" 
							v-model="inputCoin.form"
							class="quick-top-box-right-input" clearable
								style="height:40px;" />
						</div>

						<div class="h-10px flex justify-end mb-20px text-#86909C">
							<p v-if="inputCoin.form">≈$1212.00</p>
						</div>
					</div>
					<div class="flex justify-center mt-40px mb-40px">
						<img src="/transaction/exchange/change.svg" alt="" class="w-24px h-24px">
					</div>
					<div class="border-1px border-solid border-#E5E6EB p-16px rounded-10px">
						<div class="flex items-center justify-between w-100%
						text-14px text-#000000">
							<p>至</p>
							<div class="flex items-center justify-between">
								<p class="mr-10px">可用余额 0 USDT</p>
							</div>
						</div>

						<div class="flex items-center justify-between mb-10px mt-10px">
							<img :src="selectedCoin.to.icon" style="width: 20px;height:20px;">
							<el-select v-model="selectedCoin.to.coin" suffix-icon="CaretBottom"
								class="m-2 exchange-top-box-right-select" size="large" @change="changeToCoin"
								style="width: 100px;height: 40px;" popper-class="c2c-select-popper" placement="bottom-end">
								<el-option v-for="(item, index) in coinList" :label="item.coin" :value="item.coin"
									:key="index">
									<div>
										<div>
											<img :src="item.icon" alt="">
											<span class="text-dark-700">
												{{ item.coin }}
											</span>
										</div>

										<el-icon color="rgb(17,76,238)"
											v-if="item.coin === selectedCoin.to.coin"><Select /></el-icon>
									</div>
								</el-option>
							</el-select>
							<el-input placeholder="100-200000" 
							v-model="inputCoin.to"
							class="quick-top-box-right-input" clearable
								style="height:40px;" />
						</div>
						<div class="h-10px flex justify-end mb-20px text-#86909C">
							<p v-if="inputCoin.to">≈$1212.00</p>
						</div>
					</div>
					<div class="flex items-center justify-between w-100%" v-if="inputCoin.form && inputCoin.to">
						<p class="text-#000000 text-14px">
							兑换率
						</p>
						<p class="text-#86909C text-14px">
							1 BTC≈1212.00 ETH
						</p>
					</div>
					<div class="box-border mt-180px w-100% absolute bottom-40px left-0px pl-30px pr-30px">
						<el-button type="primary" class="w-100%" color="#ECECF0" style="height: 50px;font-sze:18px;color:#86909C" v-if="!inputCoin.form || !inputCoin.to">
							输入金额
						</el-button>
						<el-button type="primary"  class="w-100%"  color="#114CEE" style="height: 50px;font-sze:18px;color:#fff" v-else @click="showConfirmDialog = true">
							预览兑换结果
						</el-button>
					</div>
				</div>
			</div>
		</div>
		<!-- 背景图片 -->
		<div class="absolute top-20px left-600px z--1">
			<img src="/transaction/exchange/bg-start.svg" alt="" class="w-200px h-200px" />
		</div>
		<!-- 列表 -->
		<div class="mt-100px">
			<TableTag />
		</div>
		<!-- 常见问题 -->
		<div class="mt-100px">
			<CommonProblem />
		</div>
	</div>
	<AddDialog :show="showAddDialog" @close="closeAddDialog"></AddDialog>
	<ConfirmDialog :show="showConfirmDialog" @close="closeConfirmDialog"
	@sure="clickConfirmDialog"></ConfirmDialog>
	<ResultDialog :show="showResultDialog" @close="closeResultDialog"
	@ok="clickResultDialog"></ResultDialog>
</template>
<script lang="ts" setup>
import TableTag from './components/TableTag.vue';
import CommonProblem from './components/CommonProblem.vue';
import AddDialog from './components/AddDialog.vue';
import ConfirmDialog from './components/ConfirmDialog.vue';

import ResultDialog from './components/ResultDialog.vue';
const coinList = ref<any[]>([
	{
		icon: '/purchase/btc.svg',
		coin: 'BTC'
	},
	{
		icon: '/purchase/eth.svg',
		coin: 'ETH'
	},
	{
		icon: '/purchase/trx.svg',
		coin: 'TRX'
	},
	{
		icon: '/purchase/usdt.svg',
		coin: 'USDT'
	}
])

// 控制账户入金弹窗
const showAddDialog = ref<boolean>(false);

const closeAddDialog = (val:boolean) => {
	showAddDialog.value = val;
}

// 控制确认订单弹窗
const showConfirmDialog = ref<boolean>(false);
const closeConfirmDialog = (val:boolean) => {
	showConfirmDialog.value = val;
}
const clickConfirmDialog = () => {
	showConfirmDialog.value = false;
	showResultDialog.value = true;
}

// 控制兑换结果弹窗
const showResultDialog = ref<boolean>(false);
const closeResultDialog = (val:boolean) => {
	showResultDialog.value = val;
}
const clickResultDialog = () => {
	showResultDialog.value = false;
}
// 选中币种
const selectedCoin = ref<any>({
	form: {
		coin: 'BTC',
		icon: '/purchase/btc.svg'
	},
	to: {
		coin: 'USDT',
		icon: '/purchase/usdt.svg'
	}
})
// 输入
const inputCoin = ref<any>({
	form:'',
	to:''
})

// 改变币种
const changeFormCoin = (coin: string) => {
	coinList.value.forEach((item: any) => {
		if (item.coin === coin) {
			selectedCoin.value.form.coin = item.coin;
			selectedCoin.value.form.icon = item.icon;
		}
	})
}
const changeToCoin = (coin: string) => {
	coinList.value.forEach((item: any) => {
		if (item.coin === coin) {
			selectedCoin.value.to.coin = item.coin;
			selectedCoin.value.to.icon = item.icon;
		}
	})
}
</script>
<style lang="scss" scoped>
::v-deep .el-input,
::v-deep .el-input__wrapper {
	border: none;
	box-shadow: none;
	/* 如果有阴影，也可以关闭 */
	padding: 0 1px;
}

::v-deep .el-input__inner {
	text-align: right;
	font-size: 20px;
}

::v-deep .el-select__wrapper {
	border: none !important;
	box-shadow: none;
	padding: 0 1px;

	&:hover {
		border: none !important;
	}
}

::v-deep .el-select_wrapper.is-hovering:not(.is-focused) {
	border: none !important;
	box-shadow: none;
}

::v-deep .el-select__selected-item {
	color: #20232A;
	font-weight: bold;
	font-size: 16px;
}
</style>
<style lang="scss">
.exchange-top-box-right-select {
	padding: 0 !important;
	width: 190px;

	ul {
		padding: 0;

		li {
			padding: 10px 20px;
			;
			height: 50px;

			>div {
				display: flex;
				align-items: center;
				justify-content: space-between;

				>div {
					display: flex;
					align-items: center;

					>span {
						margin-left: 10px;
					}
				}

				>img {
					width: 20px;
					height: 20px;
				}
			}
		}
	}

	.el-popper__arrow {
		display: none;
	}
}
</style>
